<!--
 * @Descripttion: 抽屉
 * @LastEditors: xzh
 * @LastEditTime: 2023-08-06 11:22:12
-->
<template>
  <el-drawer
    class="dile-drawer"
    v-model="visible"
    :key="key"
    direction="rtl"
    :size="size"
    :close-on-click-modal="closeOnClickModal"
  >
    <template #header>
      <slot name="header" />
    </template>
    <template #default>
      <el-scrollbar
        v-loading="loading"
        :class="['drawer-content', !!readonly ? 'drawer-content-disabled' : '']"
      >
        <transition name="el-fade-in">
          <slot name="default" />
        </transition>
      </el-scrollbar>
    </template>
    <template #footer>
      <!-- 不使用插槽&&不隐藏底部 -->
      <div v-if="!useSlots().footer && !hideFooter" class="drawer-footTool">
        <el-button text @click="visible = false">{{
          $t("common.cancel")
        }}</el-button>
        <el-button type="success" @click="emit('sure')">{{
          $t("common.define")
        }}</el-button>
      </div>
      <slot v-else name="footer" />
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import Dile_Methods from "@/utils/methods";
import { ref, reactive, computed, useSlots } from "vue";
const emit = defineEmits(["update:modelValue", "sure"]);
const props = defineProps({
  modelValue: {
    type: Boolean,
    requited: true,
    default: false,
  },
  //加载
  loading: {
    type: Boolean,
    requited: false,
    default: false,
  },
  //点击遮罩层关闭弹框
  closeOnClickModal: {
    type: Boolean,
    requited: false,
    default: false,
  },
  // 尺寸
  size: {
    type: [String, Number],
    requited: false,
    default: "40%",
  },
  //隐藏底部按钮
  hideFooter: {
    type: Boolean,
    requited: false,
    default: false,
  },
  //只读
  readonly: {
    type: Boolean,
    requited: false,
    default: false,
  },
});
let key = ref<string>(Dile_Methods.newGuid());
/**
 * @Author: xzh
 * @Descripttion: 选中数据
 * @Param:
 */
let visible = computed({
  get() {
    key.value = Dile_Methods.newGuid();
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  },
});
</script>
<style lang="scss" scoped></style>
